QA & Testing · Phase 05 of 05

Use Playwright for the UI.
Keep the report as the
evidence.

The second half of the workshop deck expands the same automation model to end-to-end testing. Playwright is presented as the browser layer in the broader pipeline: AI generates UI tests, GitHub Actions runs them, and HTML reports, screenshots, and traces become validation artifacts instead of just developer debugging tools.

Playwright TypeScript HTML Reports Screenshots Trace Viewer

Playwright covers what unit tests cannot: the real browser, the real UI, and the rendered state.

The deck positions Playwright as the browser-driven complement to unit and integration testing, not a replacement for them.

Capability 01

Cross-browser execution

One test suite can drive Chromium, Firefox, and WebKit so teams validate user-visible behavior without multiplying authoring effort.

Capability 02

Real user actions

Clicking, typing, hovering, uploads, dialogs, and navigation all happen in a real browser context rather than in mocked logic alone.

Capability 03

Rendered-state assertions

Playwright validates what the user actually sees: text, visibility, field values, URLs, network results, and browser state after the interaction.

Capability 04

Screenshots and video

The framework captures what rendered at failure time, which makes the artifact useful for both debugging and validation evidence review.

Capability 05

Agent-friendly authoring

The workshop uses the same prompt model as Jest generation, just with Playwright-specific locators, routes, and output requirements.

The preferred Playwright style is role-based, async, and intentionally resilient.

The deck’s code walkthrough is teaching habits as much as syntax: use user-facing locators, let Playwright auto-wait, and attach requirement tags at the test level.

Locator strategy

Find elements the way users understand them

Preferred
getByRole(), getByLabel(), visible text, and explicit test IDs when needed.
Reason
These locators survive CSS and layout changes better than brittle selectors tied to implementation detail.
Execution model

Let Playwright wait and retry

Actions
Fill, click, select, upload, and navigate through async calls that wait for readiness automatically.
Assertions
expect().toHaveText() and related checks retry until the condition passes or the timeout expires.
Prompt Add-on

Include the route or screen URL

The deck says to add the screen route and, where relevant, the Figma reference so the model can anchor the browser journey.

Prompt Add-on

Ask for one test per acceptance criterion

That keeps the generated suite readable and makes requirement-tagged reporting cleaner later.

Prompt Add-on

Add screenshot-on-failure and a11y checks

The prompt reference card explicitly recommends attaching failure screenshots and adding accessibility assertions alongside functional ones.

Tips & Tricks

Before trusting a generated Playwright suite in CI, manually harden the two or three selectors most likely to churn. A quick human pass on locators pays back far more than chasing flaky browser runs later.

Playwright’s report is treated as a first-class validation artifact, not just a developer debug view.

This is the most important reframing in the Playwright section of the deck: HTML reports, screenshots, traces, and tagged test names can serve as evidence a QA lead can actually review.

1

Run Playwright on every PR

The sample GitHub Actions workflow installs browsers, runs the suite, and points at a staging URL rather than production.

2

Always upload the report

The workflow uploads the Playwright report even on failure, so the run always leaves behind reviewable evidence rather than just a red check.

3

Keep artifacts long enough for review

The deck’s example keeps reports for 30 days, explicitly long enough for a GxP review cycle following a release.

Playwright Test Report · Hours Tracking · Build #218 playwright
8 passed · 0 failed · Duration: 42s · Browsers: Chromium, Firefox
[REQ-HT-012] consultant can log 7.5h to project A3.2s
[REQ-HT-012] rejects negative hours1.8s
[REQ-HT-013] daily total cannot exceed 24h2.1s
[REQ-HT-014] approval workflow — manager can approve4.5s
[REQ-HT-014] approval workflow — shows pending state3.8s
Report Artifact

Screenshots on failure

Each failed assertion can capture the exact UI state the user would have seen at the moment of error.

Report Artifact

Trace viewer

The trace file records the execution timeline, including network activity, DOM changes, and screenshots, so failures are reproducible after the run.

Report Artifact

REQ tags in report groups

With requirement IDs embedded in describe blocks and test names, the report becomes a partial traceability matrix instead of only a technical log.

The deck closes with a small, concrete rollout: start with one function, then make the pattern the standard.

The implementation plan is intentionally modest so the workflow becomes normal team behavior instead of a one-off workshop exercise.

1

This week

Run the exercise on one real Hours Tracking function, generate the tests, and open a draft PR to watch the pipeline execute end to end.

2

Week 2

Add a coverage threshold gate in GitHub Actions. The deck suggests starting at 80% before moving toward the stronger standard.

3

Week 3

Generate a traceability report from the requirement tags in merged PRs and bring it into Becky’s review process.

4

Ongoing

Every new feature gets a test prompt and a test file. The deck’s message is that this becomes the default workflow, not an occasional accelerator.

Standard Before (Manual) After (Automated)
GL-IT-02-S25 §4.3Test Evidence Screenshots and manual test logs, assembled by hand GitHub Actions produces a signed, timestamped test artifact on every run
GL-IT-09-S28 §5.1Req. Traceability Spreadsheet maps requirements to test cases — updated manually REQ tags embedded in test names; traceability report generated automatically
GAMP 5 Cat 4/5Validation Coverage Test scripts written after code; coverage unknown until audit Coverage threshold enforced as a PR gate; no merge below 90%
SOx IT ControlsChange Control Test results attached to change tickets manually, sometimes post-facto Test results are a mandatory PR artifact — change cannot close without them
Section takeaway
Automated testing is presented here as GxP-friendly by construction. The combination of AI-generated tests, PR gates, Playwright evidence, and requirement-tagged outputs is meant to reduce both engineering friction and audit friction at the same time.